<template>
    <view
        mut-bind:tap="onCheckboxChangeTap"
        :class="'label label-' + placement + ' label-placement-' + parentPlacement + ' ' + (disabled ? 'label-disabled l-disabled-class' : 'l-class')"
    >
        <view class="checkbox" :style="'color:' + (checked ? selectColor : disabled ? disabledColor : color) + ';font-size: ' + size">
            <slot v-if="custom" name="icon" />
            <view v-else :class="'iconfont ' + (checked ? 'icon-select' : 'icon-unselect')"></view>
        </view>
        <slot />
    </view>
</template>

<script>
import lButton from '../button/index';
export default {
    unicomGroup: ['checkbox-group'],
    data() {
        return {
            parentPlacement: ''
        };
    },
    mixins: ['wx://form-field'],
    externalClasses: ['l-class', 'l-disabled-class'],
    relations: {
        '../checkbox-group/index': {
            type: 'parent'
        }
    },
    options: {
        multipleSlots: true
    },
    props: {
        placement: {
            type: String,
            default: 'left'
        },
        custom: {
            type: Boolean,
            default: false
        },
        key: {
            type: String,
            default: ''
        },
        cell: {
            type: Object,
            default: () => ({})
        },
        size: {
            type: String,
            default: '38rpx'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        selectColor: {
            type: String,
            default: '#3963BC'
        },
        disabledColor: {
            type: String,
            default: '#ccc'
        },
        color: {
            type: String,
            default: '#ccc'
        },
        checked: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready() {
            const e = this.getRelationNodes('checkbox-group')[0];
            let { placement: t } = e.properties;
            this.setData({
                parentPlacement: t
            });
        },

        onCheckboxChangeTap() {
            if (this.disabled || this.parentDisabled) {
                return;
            }
            const e = this.getRelationNodes('checkbox-group')[0];
            if (this.checked) {
                if (this.isOverflow('minSelected')) {
                    return;
                }
            } else if (this.isOverflow('maxSelected')) {
                return;
            }
            const t = {
                checked: !this.checked,
                key: this.key,
                cell: this.cell
            };
            if (e) {
                e.onEmitEventHandle(t);
            }
        },

        isOverflow(e) {
            const t = this.getRelationNodes('checkbox-group')[0];
            const l = t.properties[e];
            if (!l) {
                return false;
            }
            const i = Object.values(t._selected).length;
            let o = 'minSelected' === e ? i <= l : i >= l;
            if (o) {
                let i = 'minSelected' === e ? 'min_selected' : 'max_selected';
                if (t.onEmitOverflowHandle) {
                    t.onEmitOverflowHandle({
                        key: this.key,
                        limitNumber: l,
                        type: 'overflow_' + i
                    });
                }
            }
            return o;
        }
    },
    created: function () {}
};
</script>
<style>
.label {
    display: flex;
    flex: 1;
    align-items: center;
    font-size: 30rpx;
    color: #333;
    width: 100%;
    box-sizing: border-box;
}
.label-left {
    flex-direction: row;
}
.label-right {
    flex-direction: row-reverse;
    justify-content: space-between;
}
.label-disabled {
    color: #ccc;
}
.label-placement-row {
    padding-right: 30rpx;
}
.checkbox {
    margin-right: 20rpx;
}
.iconfont {
    font-family: iconfont !important;
    display: inline-flex;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@font-face {
    font-family: iconfont;
    src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMMAAsAAAAABxgAAAK9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBeIFdATYCJAMMCwgABCAFhG0HQBstBlGUzMkA2c8E020e0uBCKA1ReoTOr2jhX60Fez8evvb7nbu7X40GSTTS8S6aRBOpkCB1plMyIWkJb/+nLTemUXn+tjy1proDbGd+u9OXhuW20ygDQoJwOPhjfw50kxP0dlsW4tKSEtLyKhWqIpT/3MKy5KTZgMvpr8TnWZbTWts2jgmYYEBjDHuKrEQCzjUF2R2BWvJ9Am0LeioHm9MVtBXOskC8RIED7VJMUaRiU6i37C3iHV4zvaZPKG/x5+OfLdoktcxZe/S89mH27bv8VD0phAT5ch5Ih8jYBApx3eq7Uktzm2rahqZu1oO6IqSlklVFLDMN9YP+8RJR55R2wSrNJ775IoLvWEgggzoKDoFYipp4U38JhsVnsZqMDSLDTR9O5v6lxM+emWKnJ0j1WkJfv81PpvtdvqfbrTPuXw1+/Yswbx81bvFu4GNdLq7/WnYQrkR7OT7DTrwSHIOw0QhHGI+BEQb/TCiV/n/7MQFAQ9mO3iwSi9Gz9MCEpIu0tWgZiFkilLN8tRFgA1SnfMgz8o0Kgo9Q+Gcx3f/tTgFfe45JtDoVFO7QvAt/8FflYE8xlY49F13my+xAtjTRk6ASOahCOaGxn+mGGVxKaJrlSBrmkTUtkoWziZqOLdQ1baNtw/Zwx4SoidLCuneCMPSBpO8T2dAXWTjfqJnzi7ph1NB2EdwzO5Yj6oaEHCUf3UeMPM6N59RuUn6m4DZ1pKiMuTckZZTE8WBULW4pJ1liQ3kXTFQNGuEMN+QxSlPGQjgmTwehajEdDk3biwYeZ9C1TxCHIj7keoQiHpYz4XDVrb3/jARupRzS09AQv0FEKRodjQ2MAHKry6GGR2FTuhOYUMpAhmAZtCEekro5hor2WTHiUQPhhExhasgGGVQ32N6Q/UCp1ILzXI4UOYrOQ0he4vKDxXk7twIAAAAA')
        format('woff2');
}
.icon-unselect:before {
    content: '\e727';
}
.icon-select:before {
    content: '\e725';
}
</style>
